<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .top-banner {
      background-color: pink;
      height: 80px;
    }

    .w {
      width: 1210px;
      margin: 10px auto;
      position: relative;
    }

    img {
      display: block;
      width: 1210px;
      height: 80px;
      background-color: blue;
    }

    a {
      position: absolute;
      top: 5px;
      right: 5px;
      color: #fff;
      background-color: #000;
      text-decoration: none;
      width: 20px;
      height: 20px;
      font: 700 14px/20px "simsum";
      text-align: center;
    }

    .hide {
      display: none !important;
    }
  </style>
</head>

<body>
  <div class="top-banner" id="topBanner">
    <div class="w">
      <img src="" alt="" />
      <a href="#" id="closeBanner">×</a>
    </div>
  </div>


  <script>
    //需求：点击案例，隐藏盒子。
    //思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。

    //1.获取事件源和相关元素
    var closeBanner = document.getElementById("closeBanner");
    var topBanner = document.getElementById("topBanner");
    //2.绑定事件
    closeBanner.onclick = function () {
      //3.书写事件驱动程序
      //类控制
      //        topBanner.className += " hide"; //保留原类名，添加新类名
      topBanner.className = "hide"; //替换旧类名（方式一）
      //        topBanner.style.display = "none"; //方式二：与上一行代码的效果相同
    }
  </script>
</body>

</html>